import { IconPlus } from "artemis-icon";
import React, { useState } from "react";
import './StyleGrid.less'


export default React.memo(function ({ label, onChange, field }) {
  const [ array, setArray ] = useState([undefined])

  const __onChange = (value, index) => {
    const __array = [...array]
    __array.splice(index, 1, value)
    setArray(__array);
    onChange(__array, field);
  }

  const __push = () => {
    setArray([...array, undefined]);
  }

  console.log({ label, onChange, field })

  return (
    <div className="form-item flex-col flex-center">
      <div className="form-item-label flex flex-align-start">
        <label>{ label }</label>
        <div className="form-item-action">
          <IconPlus onClick={__push} className="action-icon action-add"/>
        </div>
      </div>
      {
        array.length && (
          array.map((item, index) => {
            return (
              <div key={index} className={`form-item-control`}>
                <div className="row form-item flex-center">
                  <div className="col-8 form-item-label">
                    <label>值{ index + 1 }：</label>
                  </div>
                  <div className={`col-16 form-item-control`}>
                    <input
                      type="text"
                      className="cb-input"
                      placeholder="请输入"
                      onChange={(event) => __onChange(event.target.value, index)}
                    />
                  </div>
                </div>
              </div>
            )
          })
        )
      }
    </div>
  )
})